<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>登录</h1>
    <p>用户名：<input type="text" id="username"></p>
    <p>密码：<input type="text" id="password"></p>
    <p><button id="btn">登录</button></p>

    <script>
        //  目标 ： 把用户的信息发送后端进行验证
        // ajax ： xhr
        document.querySelector('#btn').onclick = function(){
            //1.获取数据
            var username_value = document.querySelector("#username").value;
            var password_value = document.querySelector("#password").value;
            //测试数据
            // console.log(username_value,password_value);
            
            //2.数据交互：发送数据；
            //发请求： xhr 发送http 请求
            //2.1 创建xhr对象
            var xhr = new XMLHttpRequest();
            //2.2配置 xhr 对象
            xhr.open( "GET" , "./03_project.php?username="+username_value+"&password="+password_value);
            //2.3 发送http 请求
            xhr.send();
            // 2.4接受请求的响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    // console.log(xhr.responseText);
                    if(xhr.responseText ==="登录成功"){
                        alert("恭喜登录成功")
                    }else{
                        alert("抱歉，请重新登录")
                    }
                }
            }
        }
                  // GET 请求如何携带数据 ; 就是把数据放在地址栏里面; 
                  // url?key=value :
                  // 字段的定义一般情况下都是后端主导的; 
                  // 你写入对应的字段即可;
                  // var str = "./06_project.php?username=" + username_value +"&password=" + password_value; 
                  // console.log(str);
    </script>
</body>
</html>